<template>
  <div class="wx-reply-editor">
    <tinymce
      ref="editor"
      :height="200"
      :quickbarsInsertToolbar="false"
      :quickbarsSelectionToolbar="false"
      :statusbar="false"
      :toolbar="false"
      :menubar="false"
      :contentCss="contentCss"
      :setup="setup"
      :extraOptions="extraOptions"
      :value="value"
      @input="inputText"/>
  </div>
</template>

<script>
import Tinymce from '@/perm/components/Tinymce/index'
export default {
    name: 'WxReplyEditor',
    components: {
        Tinymce
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        /**
         * 定义需要哪些按钮
         * nickname finish unfinish stock
         */
        buttons: {
            type: Array,
            default: () => ['nickname', 'finish', 'unfinish', 'stock']
        },
        splitButton: {
            type: Object,
            default: () => {
                return { name: 'taskTargetNum', btnList: [] }
            }
        }
    },
    data () {
        return {
            contentCss: 'css/wx-reply-editor.css',
            buttonMap: {
                nickname: {
                    tip: '昵称'
                },
                finish: {
                    tip: '已完成任务量'
                },
                unfinish: {
                    tip: '未完成任务量'
                },
                stock: {
                    tip: '奖品剩余库存'
                }
            },
            extraOptions: {
                // target_list: false,
                // link_title: false
            },
            setup: (editor) => {
                this.buttons.forEach(button => {
                    // 获取button描述
                    const buttonObj = this.buttonMap[button]
                    /* 根据buttons，新建按钮 */
                    editor.ui.registry.addButton(button, {
                        text: `<span style="color: grey;">${buttonObj.tip}</span>`,
                        onAction: function (_) {
                            editor.insertContent(`<span class="mceNonEditable">${buttonObj.tip}</span>`)
                        }
                    })
                    const _this = this
                    editor.ui.registry.addSplitButton('taskTargetNum', {
                        text: '任务目标人数',
                        onAction: function () {
                            // editor.insertContent('<p>You clicked the main button</p>');
                        },
                        onItemAction: function (api, value) {
                            editor.insertContent(value)
                        },
                        fetch: function (callback) {
                            const items = []
                            _this.splitButton.btnList.forEach(item => {
                                items.push(
                                    {
                                        type: 'choiceitem',
                                        text: item.name,
                                        value: `<span class="mceNonEditable">${item.name}</span>`
                                    }
                                )
                            })

                            callback(items)
                        }
                    })
                })
            }
        }
    },
    methods: {
        inputText (value) {
            this.$emit('input', value)
        },
      /**
       * 向光标处插入内容
       */
      insertContent (value) {
        this.$refs.editor.mceInsertContent(value)
      },
      mceInsertLink () {
        this.$refs.editor.mceInsertLink()
      }
    }
}
</script>

<style lang="less">
.wx-reply-editor {
  width: 630px;
    .mce-content-body p {
        margin: 0;
    }
}
</style>
